{% extends "base.html" %}

{% block index %}
<script>
function checkStatus(){
    var Notifier = {{ Notifier|safe }};
    if(Notifier['is_warning_when_human']==true){
        // label状态转换
        $('#label1').removeClass("red").addClass("green");
    }
    if(Notifier['is_warning_when_move']==true){
        $('#label2').removeClass("red").addClass("green");
    }
    if(Notifier['is_warning_when_smoke']==true){
        $('#label3').removeClass("red").addClass("green");
    }
    if(Notifier['is_warning_when_fire']==true){
        $('#label4').removeClass("red").addClass("green");
    }
}
window.onload = checkStatus;
</script>
<div class="ui segment">
    <div class="ui grid"> 
        <div class="ui padded grid" style="padding: 5px;">
            <div class="ui label">
                <i class="ui red empty circular label" id="label1"></i>人类检测
            </div>
            <div class="ui label">
                <i class="ui red empty circular label" id="label2"></i>移动检测
            </div>
            <div class="ui label">
                <i class="ui red empty circular label" id="label3"></i>烟雾检测
            </div>
            <div class="ui label">
                <i class="ui red empty circular label" id='label4'></i>火焰检测
            </div>
        </div>    
        <img src="video_feed" width="640" height="480">
        <table class="ui fixed table" id="status_table" style="width: 640px">
            <thead>
                <tr>
                    <th width="50px">事件类型</th>
                    <th width="100px">事件</th>
                    <th width="50px">时间</th>
                </tr>    
            </thead>
            <tbody>
                {% for status in status_list %}   
                    <tr>
                        <td> {{ status.1 }} </td>
                        <td> {{ status.2 }} </td>
                        <td> {{ status.0 }} </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
        <!-- <div class="ui left floated compact segment">
            <form id="configCheckbox" method="POST" onsubmit="return postConfig();">
                <div class="ui toggle checkbox">
                    <input type="checkbox" id="checkbox1" onclick="isHumanDetect()">
                    <label>人类检测</label>
                </div>
                <div class="ui toggle checkbox">
                    <input type="checkbox" id="checkbox2" onclick="isMoveDetect()">
                    <label>移动检测</label>
                </div>
                <div class="ui toggle checkbox">
                    <input type="checkbox" id="checkbox3" onclick="isSmokeDetect()">
                    <label>烟雾检测</label>
                </div>
                <div class="ui toggle checkbox">
                    <input type="checkbox" id="checkbox4" onclick="isFireDetect()">
                    <label>火焰检测</label>
                </div>
            </form>    
        </div> -->
    </div>
</div>
{% endblock %}